<script setup lang="ts">
import dayjs from 'dayjs';
import { ref } from 'vue';
import 'dayjs/locale/zh-cn';
import CabinetDrawer from './CabinetDrawer.vue';


defineProps<{
}>()

</script>

<template>
  		<div class="cabinet">		
        <div class="up"></div>			
        <div class="bottom"></div>
        <!-- <div class="front">
        </div> -->
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        
        <!-- <div class="drawer"> -->
          <CabinetDrawer></CabinetDrawer>
        <!-- </div> -->
      </div>
      
</template>

<style scoped>
.drawer {
  /* position: absolute; */
  
  /* transform: translateX(-25em) translateZ(0em); */
  /* scale: 3; */
}

.cabinet {
  --width:15em;
  --height:20em;
  --deep:20em;
  --colorFront:rgb(129, 129, 128);
  --colorBack:rgb(129, 129, 128);
  --colorLeft:rgb(129, 129, 128);
  --colorRight:rgb(129, 129, 128);
  --colorUp:rgb(129, 129, 128) ;
  --colorBottom:rgb(129, 129, 128);
  
  transform-style: preserve-3d;
  perspective:110em;
  transform: rotate3d(1, 0, 0, -20deg) rotate3d(0, 1, 0, -30deg);
  /* transform: rotate3d(1, 0, 0, -20deg) ; */
  /* animation: rotate 3s linear infinite; */
    position: absolute;
    /* top:10.5em; */
    transform-origin: 50% 50%;
    
  }
  @keyframes rotate {
      0% {        
          transform: rotate3d(1, 1, 1, 0deg);
      }
      100% {        
          transform: rotate3d(1, 1, 1, 360deg);
      }
  }
  .cabinet div{
    box-shadow: inset 0 0 2em 0.8em #00000050;
    /* border-radius: 0.1em; */
  }
.cabinet .bottom {
  width: var(--width);
  height: var(--deep*1.8);
  background-color: var(--colorBottom);
  /* position:absolute; */
  transform: rotate3d(1, 0, 0, 90deg) translate3d(0,0,calc(var(--height) * -1));  
  transform-origin: 0 0;
  box-shadow: inset 0 0 0.1em 0.1em #00000050;
  border-radius: 2em;
}
.cabinet .up {
  width: calc(var(--width)*1.06);
  height: calc(var(--deep)*1.06);
  background-color: var(--colorUp);
  position:absolute;
  transform: rotate3d(1, 0, 0, 90deg) translateX(calc(var(--width)*-0.03));  
  transform-origin: 0 0;
  /* box-shadow: inset 0 0 0.1em 0.1em #00000050, 0 0.2em 0.1em 0.1em var(--colorUp); */
  box-shadow: 0 0.2em 0.1em 0.01em #000;
}
.cabinet .front {  
  width: var(--width);
  height: var(--height);
  position:absolute;
  /* background-color: var(--colorFront); */
  transform: translate3d(0 , 0 ,calc(var(--deep)*1));    
  
}
/* .cabinet .drawer {
  width: calc(var(--width)*0.8);
  height: calc(var(--height)*0.8);
  background-color: var(--colorFront);
  position:absolute;
  transform: translate3d(0 , 0 ,calc(var(--deep)*1));    
  transform-origin: 0 0;
  animation: drawer 3s linear infinite;
} */

.cabinet .back {  
  width: var(--width);
  height: var(--height);
  position:absolute;
  background-color: var(--colorBack);
  box-shadow: inset 0 0 0.1em 0.1em #00000050;
}

.cabinet .left {    
  width: var(--deep);
  height: var(--height);
  position:absolute;  
  background-color: var(--colorLeft);
  transform: rotate3d(0, 1, 0, 90deg)translate3d( calc(var(--deep) * -1),0 ,0);
  transform-origin: 0 0;
  /*  */
}

.cabinet .right {    
  width: var(--deep);
  height: var(--height);
  position:absolute;  
  background-color: var(--colorRight);
  transform: rotate3d(0, 1, 0, 90deg)translate3d( calc(var(--deep) * -1),0 ,calc(var(--width) * 1));
  transform-origin: 0 0;
  /*  */
}

</style>